<template>
  <div>
    <div class="customizeExport" v-if="tabType === 'customer'">
      <div class="f-title">
        <!--导出任务列表-->
        <backBtn type="customer"></backBtn>{{$t('customer.exportTaskList')}}
        <!--刷新-->
        <span @click.stop="freshSearch" class="refresh"><i class="iconfont icon-shuaxin"></i></span>
      </div>
      <div style="padding-left: 20px;height: calc(100vh - 96px);overflow-y: auto;">
        <div style="color: #3b5998;margin: 10px 20px 15px 0px;">{{$t('customer.exportTaskList1', {limitNum: exportTaskLimit.customer})}}</div>
        <affix :label="$t('qualityCheck.condition')">
          <el-form :inline="true">
            <el-form-item :label="$t('call.bAndETime')">
              <el-date-picker v-model="rangeTime"
                              type="datetimerange"
                              size="mini"
                              :editable = "false"
                              :picker-options="pickerOptions"
                              id="customerExportPicker"
                              :placeholder="$t('public.timeRanges')"></el-date-picker></el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button @click.stop="rest" class="primary_btn">{{$t('public.reset')}}</el-button>
            <el-button type="primary" @click.stop="getTableList1" class="primary_btn">{{$t('public.search2')}}</el-button>
          </div>
        </affix>
        <affix :label="$t('call.queryResult')">
          <div class="tables">
            <div class="deploy">
              <div class="search-pagination">
                <Pagination
                  :small="true"
                  :currentPage="currentPage"
                  :count="total"
                  @turnPage="turnPage"
                  :totalPage="totalPage"
                >
                </Pagination>
              </div>
            </div>
            <el-table :data="tableData" stripe style="width: 100%" v-loading = "tableLoading" size="mini">
              <el-table-column prop="createTime" :label="$t('customer.createTime')" min-width="200">
              </el-table-column>
              <el-table-column prop="flag" :label="$t('customer.exportProgress')" min-width="80">
              </el-table-column>
              <el-table-column prop="note" :label="$t('public.note')">
              </el-table-column>
              <el-table-column :label="$t('public.operate')" width="130">
                <template scope="scope">
                  <el-button type="text" size="mini" v-if = "scope.row.flag === '完成'">
                    <!--下载-->
                    <a :href="handleDownLoad(scope.$index, scope.row)" download target="_blank">{{$t('public.download')}}</a>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </affix>
      </div>
    </div>
  </div>
</template>
<script>
  /**
   * CoustomizeExport 导出任务列表组件
   * @author yangjiao
   * @path @/components/business-modules/customer/CoustomizeExport.vue
   * @methods
   * getList 回调数据 导出进度处理成中文，对应字段包含 export 正在导出 finish 完成 download 已下载
   * handleCurrentChange 点击页码触发的事件
   * freshSearch 点击刷新触法的事件
   * handleDownLoad 下载事件
   */
  import Pagination from '@/components/public-modules/card/Pagination'
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import backBtn from '@/components/public-modules/side-bar/BackSideBar.vue'
  import { getDateTime } from '@/utils/m7Utils.js'
  export default {
    name: 'CoustomizeExport',
    data () {
      return {
        creator: [],
        pickerOptions: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        rangeTime: [],
        exportTaskLimit: {},
        agents: [],
        currentPage: 1,
        pageSize: 10,
        tableData: [],
        tableLoading: false,
        total: 0
      }
    },
    computed: {
      totalPage () {
        return Math.ceil(this.total / this.pageSize) || 0
      },
      tabType () {
        let arr = this.$route.path.split('/')
        return arr[2]
      }
    },
    methods: {
      rest () {
        this.rangeTime = []
      },
      getTableList1 () { // 查询
        this.currentPage = 1
        this.getList()
      },
      getList () {
        this.tableLoading = true
        let data = {
          limit: 10,
          page: this.currentPage
        }
        if (this.rangeTime && this.rangeTime[0]) {
          data.BEGIN_TIME = getDateTime(this.rangeTime[0])
          data.END_TIME = getDateTime(this.rangeTime[1])
        }
        this.$store.dispatch('queryCustomerExportTaskList', data).then(resp => {
          this.tableData = resp.list
          this.tableLoading = false
          if (this.tabType === 'customer') {
            this.tableData.forEach((item, index) => {
              item.flag = this.$t(`customer.${item.flag}`)
            })
          }
          this.total = resp.count
        })
      },
      turnPage (val) {
        this.currentPage = val
        this.getList()
      },
      freshSearch () {
        this.getList()
      },
      handleDownLoad (index, item) {
        let sessionId = window.sessionStorage.getItem('sessionId')
        let loginToken = window.sessionStorage.getItem('loginToken')
        return item.path + '&sessionId=' + sessionId + '&loginToken=' + loginToken
      }
    },
    components: {
      Pagination,
      affix,
      backBtn
    },
    beforeMount () {
      this.rest()
      this.exportTaskLimit = this.$getCache('exportTaskLimit') || {}
      this.agents = this.$getCache('agents').map((item) => {
        return {_id: item._id, name: `${item.displayName}[${item.exten}]`}
      })
      console.log(this.agents)
      this.currentPage = 1
      this.getList()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../../assets/common.styl"
  .search-pagination
    float right
  .customizeExport,.webchatExport
    .tables
      padding: 15px 20px 0px 0px;
      .deploy
        height 48px
        color #989898
        border 1px solid #ebebeb
        border-bottom none
        padding-left 14px
        .page
          margin-top 10px
        .el-pagination
          padding 0
    .el-dialog
      .scoring
        text-align center
        color $cf-white
        margin-top 40px
        span
          display inline-block
          padding 10px 26px
          border-radius 4px
          cursor pointer
        .off
          background $c-sub
        .save
          background $c-main
          margin-left 40px
      .el-row
        margin-top 12px
        color #8f8f8f
        .el-col-7
        .el-col-11
          line-height 36px
        .el-col-13
          .totalScore
            color $c-sub
  .customizeExport,.webchatExport
    .f-title
      border-bottom 1px solid $c-border1
      height 39px
      line-height 39px
      background $cf-white
      padding-left 24px
      font-size 18px
      color $cf-gray1
      .refresh
        border none
        height 31px
        font-size 20px
        color $c-main
        cursor pointer
        position absolute
        right 20px
        .icon-shuaxin
          font-size 20px
    .f-content
      height calc(100vh - 96px)
      padding-right 5.5%
      overflow-y auto
      margin 10px 0 0 30px
      .main-form
        .modifybutton
          width 30px
          margin-right 5px
          border none
          height 20px
          font-size 14px
          text-align center
        .footer
          margin-top 4px
  .webchatExport
    .tables
      .prompt
        color #4A5F9A
        margin-bottom 10px
  .exportProcessing
    color $cf-gray1
  .exportSuccess
    color $c-main
  .exportError
    color #fd7877
</style>
